<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .className {
            color: red;
        }
    </style>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
</head>
<body>
    <script>


        // make the tests actually run in the browser
        const inBrowser = true;
        const test = `I'm a test string`;
        const elm = /*html*/ `<div></div>`;
        const deep = { test: /*html*/ `<div>going deep</div>` };
        const table = 'myTable';
        const myArray = [
            { txt: /*html*/ `<div>1</div>` }, 
            { txt: /*html*/ `<div>2</div>` }, 
            { txt: /*html*/ `<div>3</div>` }
        ];

        /**
            source.css
            meta.embedded.block.html
            text.html.derivative
        */
        let variable = /*html*/ `
            <div attr="${test}asd${test}">Test</div>${elm}
        `;

        variable = /* markdown */`this **is** ${test} _markdown_ `;
        variable = /* md */`this **is** _markdown_`;

        variable = /*css*/`
        .className {
            color: red;
        }
        `;

        variable = /*html*/`<div attr="asdasd">Test</div>${elm}`;

        variable = //html
        `
        <div>Test</div>${elm}
        `;

        variable = /*html*/ 
        `
        <div>Test</div>${elm}
        `;

        if(!inBrowser){

            // html` and similar will fail in the browser
            // this can only be used with a transpiler

            const fn = (param) => param;

            const html = (param) => html`<div>Something</div>`;
            const markdown = (param) => html`<div>Something</div>`;

            fn(markdown`
--- Hello
hello **what is this**

1. foo
1. bar
1. baz
            `);

            fn(//html
            `<div>Something</div>${elm}`
            );

            fn(html`<div>OK</div>`);

        }



        variable = /*svg*/`<text x="${test}0" y="0">${deep.test}</text>`;

        variable = /*SVG*/`
        <svg viewBox="0 0 100 100">
            ${myArray.reduce((html, elmnt) => html + /*svg*/`<text x="${test}0" y="0">${elmnt.txt}</text>`, '')}
        </svg>`;

        variable = /*sql*/`SELECT * FROM \`table\` WHERE 1=1`;

        variable = /*sql*/
        `
        SELECT -- must have whitespace [\s ] after --
            *,
            --123, -- double negative is positive!
        FROM table--syntax error in mysql
        `;

        variable = /*sql*/
        `
        SELECT * FROM ${table}
        WHERE \`test\` NOT BETWEEN 'Carnarvon Tigers' AND 'Mozzarella di Giovanni'
        ORDER BY ProductName;
        `;
        
        variable = /*XML*/
        `
        <?xml version="1.0" encoding="UTF-8"?>
        <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
        <url>
            <loc>http://www.example.com/</loc>
        </url>
        </urlset> 
        `;

        variable = /*javascript*/
        `
        function hello(){
            console.log("Hello World!")
        }
        `;

        variable = /*js*/
        `
        function hello(){
            console.log("Hello World!")
        }
        `;

        variable = /*typescript*/`
        function hello(name: string){
            console.log("Hello " + name + "!")
        }`;

        variable = /*ts*/`
        function hello(name: string){
            console.log("Hello " + name + "!")
        }`;

        const $body = $('body');

        $jQueryTest.appendTo($body);


        // test jQuery
        const $jQueryTest = $(`
        <div>
            <h1>Test Header</h1>
            <p>${test}</p>
            <p>${deep.test}</p>

        </div>
        `);

        const $jQueryTest2 = $(`
        <div>
            <h1>Test Header 2</h1>
            <p>${test}</p>
            <p>${deep.test}</p>

        </div>
        `).appendTo($body);




    </script>
</body>
</html>
